<template>
	<view>
		<view class="mask">
			<view class="search" @tap.stop="showSearch = true">
				<view class="container">
					<view class="item">
						<view class="flex cu-item justify-between align-center" @tap="showFundTypes = true">
							<view class="text-cut title">类型</view>
							<view class="flex justify-end text-gray flex-sub align-center">
								{{fundTypesName}}
								<u-icon name="arrow-right" color="#aaa"></u-icon>
							</view>

						</view>
					</view>
					<view class="item">
						<view class="flex cu-item justify-between align-center" @tap="showAccounts = true">
							<view class="text-cut title">帐户</view>
							<view class="flex justify-end text-gray flex-sub align-center">
								{{accountsName}}
								<u-icon name="arrow-right" color="#aaa"></u-icon>
							</view>

						</view>

					</view>
					<view class="item">
						<view class="flex cu-item justify-between align-center">
							<view class="title">日期</view>
							<view class="inner-container flex flex-sub justify-around text-gray">
								<picker mode="date" @change="startDateChange" :value="form.start_date" fields="day">
									<view class="text-cut">{{form.start_date ? form.start_date : '开始日期'}}</view>
								</picker>
								<view class="padding">至</view>
								<picker mode="date" @change="endDateChange" :value="form.end_date" fields="day">
									<view class="text-cut">{{form.end_date ? form.end_date : '结束日期'}}</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="flex cu-item justify-between align-center">
							<view class="title">金额</view>
							<view class="inner-container flex flex-sub justify-around text-gray">
								<view class="inner-container  flex align-center justify-around">
									<input type="digit" class="text-center" placeholder="最低金额"
										v-model="form.min_amount">
									<view class="padding">至</view>
									<input type="digit" class="text-center" placeholder="最高金额"
										v-model="form.max_amount">
								</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="flex cu-item justify-between align-center">
							<view class="title">排序</view>
							<view class="inner-container flex align-center flex-wrap">
								<view class="mr20" @tap.stop="orderType = 'date'">
									<u-button :color="orderType == 'date' ? '#FFD100' : '#aaa'" size="mini"
										:plain="orderType != 'date'">时间</u-button>
								</view>
								<view @tap.stop="orderType = 'amount'">
									<u-button :color="orderType == 'amount' ? '#FFD100' : '#aaa'" size="mini"
										:plain="orderType != 'amount'">金额</u-button>
								</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="flex cu-item justify-between align-center" @tap="showUsers = true">
							<view class="text-cut title">成员</view>
							<view class="flex justify-end text-gray flex-sub align-center">
								{{usersName}}
								<u-icon name="arrow-right" color="#aaa"></u-icon>
							</view>

						</view>
					</view>
				</view>
				<view class="footer flex align-center text-df">
					<view class="flex-sub cu-btn bg bg-gray flex-xy-center" @tap.stop="onInit()">重置</view>
					<view class="flex-treble cu-btn bg bg-theme flex-xy-center" @tap.stop="onSearch()">搜索</view>
				</view>
			</view>
		</view>


		<SelectMore :show="showFundTypes" title="请选择类型" :list="fundTypes" @hide="showFundTypes = false"
			@change="onFundTypesChange" />
		<SelectMore :show="showAccounts" title="请选择账户" :list="accounts" @hide="showAccounts = false"
			@change="onAccountsChange" />

		<SelectMore :show="showUsers" title="请选择成员" :list="users" @hide="showUsers = false" @change="onUsersChange" />
	</view>
</template>

<script>
	import SelectMore from '@/components/select-more.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		name: "search",
		components: {
			SelectMore
		},
		props: {
			orderType: {
				type: String,
				default: "date"
			}
		},
		computed: {
			...mapState(['token', 'userInfo', 'users', 'accounts', 'fundTypes']),
		},
		data() {
			return {
				showFundTypes: false,
				fundTypesName: '请选择',
				showAccounts: false,
				accountsName: '请选择',
				showUsers: false,
				usersName: "请选择",
				form: {
					funds_type_ids: [],
					account_ids: [],
					start_date: "",
					end_date: "",
					min_amount: "",
					max_amount: "",
					order_type: "",
					user_id: [],
					page_date: ''
				},
			};
		},
		methods: {
			startDateChange(e) {
				this.form.start_date = e.detail.value;
			},
			endDateChange(e) {
				this.form.end_date = e.detail.value;
			},
			onUsersChange(e) {
				this.usersName = e.names.join(',')
				this.form.user_ids = e.ids
			},
			onFundTypesChange(e) {
				this.fundTypesName = e.names.join(',')
				this.form.funds_type_ids = e.ids
			},
			onAccountsChange(e) {
				this.accountsName = e.names.join(',')
				this.form.account_ids = e.ids
			},
			onSearch() {
				this.form.order_type = this.orderType
				this.$emit('search', this.form)
			},
			onInit() {
				this.form = {
					funds_type_ids: [],
					account_ids: [],
					start_date: "",
					end_date: "",
					min_amount: "",
					max_amount: "",
					order_type: this.orderType,
					user_ids: [],
					page_date: ''
				}
				this.$emit('init', this.form)
			}
		}
	}
</script>

<style scoped lang="scss">
	.mask {
		z-index: 11;

		.search {
			background: #FFFFFF;
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			width: 600upx;

			.container {
				padding: 0 20upx;
				font-size: 28upx;

				.item {
					border-bottom: 1upx solid #eee;
					padding: 30upx 0;

					.title {
						font-weight: 600;
						width: 120rpx;
					}
				}

				.padding {
					padding: 0 20rpx;
					color: black;
				}

			}



			.footer {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;

				.cu-btn {
					height: 80upx;
				}
			}
		}
	}
</style>